Chart.js-এ লাইভ ডেটা লোড করার জন্য WebSocket অথবা AJAX ব্যবহার করা যেতে পারে। WebSocket বিশেষত যখন রিয়েল-টাইম ডেটা আপডেট প্রয়োজন, তখন খুবই কার্যকর। AJAX ব্যবহার করা হয় যখন আপনার ওয়েবসাইট বা অ্যাপ্লিকেশন নির্দিষ্ট সময় অন্তর সার্ভার থেকে ডেটা নেয়।
এখানে আমরা দুইটি পদ্ধতি — WebSocket এবং AJAX এর মাধ্যমে লাইভ ডেটা চার্টে লোড করার উদাহরণ দেখাব।
1. AJAX এর মাধ্যমে লাইভ ডেটা লোড করা
AJAX (Asynchronous JavaScript and XML) ব্যবহার করে আপনি সার্ভার থেকে ডেটা asynchronously লোড করতে পারেন এবং তা Chart.js-এ আপডেট করতে পারেন। এটি সাধারণত fetch() অথবা XMLHttpRequest ব্যবহার করে করা হয়।
উদাহরণ: AJAX ব্যবহার করে Chart.js-এ লাইভ ডেটা লোড
- HTML ফাইল (একটি সাধারণ
canvasএলিমেন্ট দিয়ে শুরু করুন):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Chart with AJAX</title>
</head>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js"></script>
</body>
</html>
- JavaScript ফাইল (AJAX ব্যবহার করে ডেটা আপডেট করা):
const ctx = document.getElementById('myChart').getContext('2d');
// ডিফল্ট ডেটা সেট করা
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [], // এখানে ডেটার লেবেল থাকবে
datasets: [{
label: 'Live Data',
data: [], // এখানে ডেটা পয়েন্ট থাকবে
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
// AJAX (Fetch API) দিয়ে লাইভ ডেটা লোড করা
function fetchLiveData() {
fetch('https://example.com/api/live-data') // আপনার API URL এখানে দেবেন
.then(response => response.json())
.then(data => {
// API থেকে প্রাপ্ত নতুন ডেটা ব্যবহার করে গ্রাফ আপডেট
const labels = data.map(item => item.time); // সময়ের লেবেল
const values = data.map(item => item.value); // ডেটার মান
// চার্টের ডেটা আপডেট করা
myChart.data.labels = labels;
myChart.data.datasets[0].data = values;
// চার্ট রিফ্রেশ করা
myChart.update();
})
.catch(error => console.error('Error fetching live data:', error));
}
// প্রতি 5 সেকেন্ড পরপর ডেটা ফেচ করার জন্য সেট করা
setInterval(fetchLiveData, 5000);
কী হচ্ছে এখানে?
fetch(): এটি AJAX কলের আধুনিক পদ্ধতি। এখানে এটি API থেকে লাইভ ডেটা আনতে ব্যবহার করা হয়েছে।- প্রতি ৫ সেকেন্ড পরপর
setIntervalফাংশনটি ডেটা ফেচ করে এবং সেই ডেটা চার্টে আপডেট করে। myChart.update(): এটি Chart.js এর মেথড যা চার্ট রেন্ডার বা আপডেট করতে ব্যবহৃত হয়।
2. WebSocket এর মাধ্যমে লাইভ ডেটা লোড করা
WebSocket ব্যবহার করে আপনি সার্ভারের সাথে একটি দুই-দিকী কানেকশন স্থাপন করতে পারেন এবং রিয়েল-টাইম ডেটা ট্রান্সফার করতে পারেন। এটি বিশেষত রিয়েল-টাইম ডেটা (যেমন স্টক মার্কেট, লাইভ স্পোর্টস স্কোর, টুইটার ফিড) দেখানোর জন্য উপকারী।
উদাহরণ: WebSocket ব্যবহার করে Chart.js-এ লাইভ ডেটা লোড
- HTML ফাইল:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Chart with WebSocket</title>
</head>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js"></script>
</body>
</html>
- JavaScript ফাইল (WebSocket ব্যবহার করে লাইভ ডেটা):
const ctx = document.getElementById('myChart').getContext('2d');
// ডিফল্ট ডেটা সেট করা
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [], // সময়ের লেবেল
datasets: [{
label: 'Live Data',
data: [], // ডেটা পয়েন্ট
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
// WebSocket কানেকশন
const socket = new WebSocket('ws://example.com/socket'); // আপনার WebSocket URL
socket.onmessage = function(event) {
const data = JSON.parse(event.data); // সার্ভার থেকে পাওয়া JSON ডেটা
// ডেটার মান এবং লেবেল থেকে নতুন ডেটা বের করা
const timestamp = data.time; // সময়
const value = data.value; // মান
// Chart.js ডেটা আপডেট করা
myChart.data.labels.push(timestamp); // নতুন লেবেল যোগ করা
myChart.data.datasets[0].data.push(value); // নতুন মান যোগ করা
// চার্ট রিফ্রেশ করা
myChart.update();
// অটোমেটিকভাবে লেবেল এবং ডেটার সংখ্যাকে সীমিত করা (5 টি সর্বশেষ ডেটা প্রদর্শন করা)
if (myChart.data.labels.length > 5) {
myChart.data.labels.shift();
myChart.data.datasets[0].data.shift();
}
};
কী হচ্ছে এখানে?
- WebSocket কানেকশন: এটি সার্ভারের সাথে একটি দুই-দিকী যোগাযোগ স্থাপন করে। যখন নতুন ডেটা পাওয়া যায়, তখন
onmessageইভেন্ট ট্রিগার হয়। - Chart.js এর ডেটা আপডেট করা হয় এবং
myChart.update()মেথড ব্যবহার করে নতুন ডেটা রেন্ডার করা হয়। - প্রতি সময়ে ৫টি সর্বশেষ ডেটা প্রদর্শন করতে shift() মেথড ব্যবহার করা হয়েছে, যা লেবেল এবং ডেটার সাইজ সীমিত করে।
সারাংশ
- AJAX ব্যবহার করে আপনি নির্দিষ্ট সময় অন্তর সার্ভার থেকে ডেটা নিয়ে চার্ট আপডেট করতে পারেন।
- WebSocket ব্যবহার করলে রিয়েল-টাইম, দুই-দিকী ডেটা ট্রান্সফার সুবিধা পাওয়া যায়, যা লাইভ ডেটা প্রদর্শনের জন্য খুবই উপকারী।
- এই পদ্ধতিগুলির মাধ্যমে Chart.js এ লাইভ ডেটা লোড করা সহজ এবং ডাইনামিক হতে পারে, এবং এটি বিশেষত ডেটার আপডেটগুলি দ্রুত প্রদর্শন করতে কার্যকর।
Content added By
Read more
